<template>
      <h1 class="system-title">{{ $t('describeView.title1') }}</h1>
      <p class="system-description">{{ $t('describeView.title2') }}</p>
      <div class="feature-list">
        <div class="feature-item" :style="{ animationDelay: '0s' }">
          <span class="feature-icon">📚</span>
          <span class="feature-text">{{ $t('describeView.title3') }}</span>
        </div>
        <div class="feature-item" :style="{ animationDelay: '0.5s' }">
          <span class="feature-icon">🕒</span>
          <span class="feature-text">{{ $t('describeView.title4') }}</span>
        </div>
        <div class="feature-item" :style="{ animationDelay: '1s' }">
          <span class="feature-icon">📊</span>
          <span class="feature-text">{{ $t('describeView.title5') }}</span>
        </div>
      </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.system-title {
  font-size: 36px;
  margin-bottom: 20px;
}
	
.system-description {
  font-size: 18px;
  margin-bottom: 30px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 20px;

}
  


.feature-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  position: relative;  
  animation: floatUp 1s ease-in-out forwards;  
  opacity: 0;  
}
@keyframes floatUp {  
  0% {  
    transform: translateY(100%);  
    opacity: 0;  
  }  
  100% {  
    transform: translateY(0);  
    opacity: 1;  
  }  
} 

.feature-icon {
  font-size: 24px;
  margin-right: 10px;
}

</style>